<template>
  <div v-if="onlyShow" class="wk-dep-checkbox">
    <div v-for="(item, i) in data" :key="i" :label="item.deptId" class="xh-user__item">
      <div class="dep-name text-one-line">
        {{ `${item.name}${item.currentNum > 0 ? `(${item.currentNum})` : ""}` }}
      </div>
      <el-button
        v-if="hasChildren(item)"
        type="text"
        icon="wk wk-icon-structure"
        @click="lowerLevelClick(item)"
        >下级</el-button
      >
    </div>
  </div>
  <el-checkbox-group
    v-else
    ref="checkboxGroup"
    v-model="currentValue"
    :disabled="disabled"
    class="wk-dep-checkbox"
    @change="depChange"
  >
    <el-checkbox
      v-for="(item, i) in data"
      :key="i"
      :label="item.deptId"
      class="xh-user__item"
    >
      <div class="dep-name text-one-line">
        {{ `${item.name}${item.currentNum > 0 ? `(${item.currentNum})` : ""}` }}
      </div>
      <el-button
        v-if="hasChildren(item)"
        type="text"
        icon="wk wk-icon-structure"
        @click="lowerLevelClick(item)"
        >下级</el-button
      >
    </el-checkbox>
  </el-checkbox-group>
</template>

<script>
import UserDepMixin from "./UserDepMixin";

export default {
  // 部门布局
  name: "WkDepCheckbox",

  components: {},

  mixins: [UserDepMixin],

  props: {
    onlyShow: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {};
  },

  computed: {},

  watch: {},

  created() {},

  mounted() {},

  beforeDestroy() {},

  methods: {
    /**
     * 下一级
     */
    lowerLevelClick(item) {
      this.$emit("next", item);
    },

    /**
     * 有
     */
    hasChildren(item) {
      if (item.hasOwnProperty("children")) {
        return item.children.length > 0;
      } else if (item.hasOwnProperty("currentNum")) {
        if (item.currentNum > 0) {
          return true;
        } else {
          if (item.hasOwnProperty("hasChildren")) {
            return item.hasChildren === 1;
          }
          return false;
        }
      }
      return false;
    },

    depChange() {},
  },
};
</script>

<style lang="scss" scoped>
.wk-dep-checkbox {
  .el-checkbox {
    margin-right: 0;
  }
  .xh-user {
    &__item {
      height: 40px;
      display: flex;
      align-items: center;

      ::v-deep .el-checkbox__input {
        flex-shrink: 0;
      }

      ::v-deep .el-checkbox__label {
        flex: 1;
        display: flex;
      }

      .dep-name {
        flex: 1;
        padding-right: 8px;
      }

      .el-checkbox {
        margin-right: 8px;
      }
      .el-button--text {
        position: relative;
        color: #ccc;
        padding: 0 12px;
        flex-shrink: 0;
        ::v-deep i {
          font-size: 13px;
          margin-right: 3px;
        }

        &:before {
          content: " ";
          position: absolute;
          top: 2px;
          left: 0;
          bottom: 2px;
          width: 1px;
          background-color: #e6e6e6;
        }

        &:hover {
          color: #2362fb;
        }

        &.is-disabled {
          color: #c0c4cc;
        }
      }
      .user {
        &-img {
          flex-shrink: 0;
        }

        &-info {
          flex: 1;
          padding: 0 8px;
        }

        &-name {
          max-width: 200px;
        }

        &-post {
          color: #999;
          margin-top: 2px;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
